<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<script>
    var allData;
    var id;
    $(function() {
        // 获取token localStorage.getItem('token')
        var url = "http://39.96.21.48:7788"
        
        // 将token设置到请求头headers中
        $.ajaxSetup({
            headers:{
                'Authorization':localStorage.getItem('token')
            }
        })
        // 根据token换取用户信息
        $.get(url+"/user/info",{token:localStorage.getItem('token')},function(res){
            $("#host").text(res.data.realname)
        })

        // 查询所有栏目信息
        function findAllCategory() {
            $.get(url+"/category/findAll",function(res){
                $("tbody").empty()
                res.data.forEach(function(item){
                    var categoryData = $(`
                        <tr>
                            <td><input type="checkbox" value="`+item.id+`"></input></td>
                            <td>`+item.name+`</td>
                            <td>`+item.description+`</td>
                            <td>
                                <a href="#" class="delete_item">删除</a>
                                <a href="#" class="edit_item">修改</a>
                            </td>
                        </tr>
                    `)
                    .appendTo($("tbody"))
                })
                allData = res.data
            })
        }
        findAllCategory()
        
        // 点击新增按钮，弹出模态框
        $("#toAddCategory").on("click",function() {
            $("#category_name").val("")
            $("#category_desc").val("")
            $("#categorAddModal").modal('show')
        })

        // 删除栏目(事件代理)
        $("tbody").on("click",".delete_item",function() {
            // console.log(this)
            var id = $(this).closest('tr').find("input").val()
            // console.log(id)
            $.get(url+"/category/deleteById?id="+id,function(res) {
                //  重新查询栏目信息
                findAllCategory()
            })
        })

        // 新增栏目信息
        $("#sava_category").on("click",function() {
            var name = $("#category_name").val();
            var desc = $("#category_desc").val();
            console.log(id)
            if(id) {
                var categoryModal = {
                    id:id,
                    name:name,
                    description:desc
                }
            }else {
                var categoryModal = {
                    name:name,
                    description:desc
                }
            }
            $.post(url+"/category/saveOrUpdate",categoryModal,function(res) {
                // console.log(res)
                // 关闭模态框
                $("#categorAddModal").modal("hide")
                // 重新查询栏目信息
                findAllCategory()
            })
        })

        // 修改(事件代理)
        $("tbody").on("click",".edit_item",function() {
            // 获取当前行数据
            id = $(this).closest('tr').find("input").val()
            // console.log(allData)
            var editData = allData.filter(function(item){
                // return item.id == id
                if(item.id == id) {
                    // console.log(item)
                    // 将拿到的当前行数据放到模态框中去
                    $("#categorAddModal").modal('show');
                    $("#category_name").val(item.name);
                    $("#category_desc").val(item.description)
                }
            })
        })

        // 批量删除
        $("#batchDelete").on("click",function() {
            // 获取所选择的ids
            var ids = $(":checkbox:checked");
            // 将获到的类数组对象->数组->遍历出id放到数组中
            var arr = [];
            Array.from(ids).forEach(function(item) {
                arr.push(item.value)
            })
            $.post(url+"/category/batchDelete",{ids:arr.toString()},function(res) {
                if(res.status == 500) {
                    alert(res.message);
                } else {
                    // 刷新数据
                    findAllCategory()
                }
            })
        }) 
    

    })
</script>
<body>
    <div class="row" style="margin: 10px 0;">
        <div class="col">
            <button id="toAddCategory" type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
                新增
            </button>  
            <button id="batchDelete" type="button" class="btn btn-danger">批量删除</button>   
        </div>
        <!-- 新增模态框 -->
        <div class="modal fade" id="categorAddModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">新增栏目</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                        <label for="category_name">栏目名称</label>
                        <input type="text" class="form-control" id="category_name" aria-describedby="emailHelp" name="name">
                        </div>
                        <div class="form-group">
                        <label for="category_desc">描述</label>
                        <input type="text" class="form-control" id="category_desc" name="description">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button id="sava_category" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
            </div>
        </div>   
    </div>
    <!-- 表格区 -->
    <table class="table">
        <thead>
            <tr>
                <th scope="col">编号</th>
                <th scope="col">栏目名称</th>
                <th scope="col">描述</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
</body>
</html>